<template>
  <view>
    <view class="banner_back">
      <view style="padding-top: 30rpx; position: relative;">
        <view style="text-align: center; color: #fff; font-size: 45rpx;">我的</view>
        <view style="position: absolute; top: 30rpx; right: 20rpx;color:#b1c0ce;font-size:42rpx;" @click="islogout">
          <image mode="widthFix" style="margin-right: 10rpx;width: 42rpx; vertical-align: middle;" src="https://alicdn.joyballet.cn/eyemanager/wechat/log-out%201.png" />退出
        </view>
      </view>
    </view>
    <view class="user_info">
      <view class="user_info_view">
        <image :src="student_avatar" mode="widthFix" class="user_avatar"></image>
        <div class="user_details">
          <span class="user_name span-Rvp-1 ">{{ name }}</span>
          <div class="user_stats">
            <span class="user_score span-kvO-1 ">积分：{{ score }}</span>
            <span class="user_count span-BZh-1 ">视训课次：{{ count }}次</span>
          </div>
        </div>
      </view>
    </view>
    <view class="QrCode centered-container">
      <view v-if="studentList.length <= 0">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="centered-button attractive-button">获取信息码</button>
      </view>
      <view v-else>
        <image :src="qrcodeUrl" mode="aspectFit"  class="centered-qrcode with-glow" /> 
      </view>
    </view> 
  </view>
</template>

<script>
export default {
	data() {
		return {
      score: 0,
      name: '小博视',
      count: 0,
			qrcodeUrl: '',
			studentList: [],
			student_id: '',
			qrtext: '',
      student_avatar: 'https://alicdn.joyballet.cn/eyemanager/wechat/avatar/boy_avatar.jpg',
		}
	},
	onShareAppMessage() {
      return {
        title: '双博视预约码', // 分享标题
        path: '/pages/index/index', // 分享路径
        imageUrl: 'https://alicdn.joyballet.cn/eyemanager/wechat/logo.png', // 分享图片，这里使用生成的二维码图片
		success: function(res) {
			// 转发成功
			console.log("转发成功:");
		},
		fail: function(res) {
			// 转发失败
			console.log("转发失败:");
		}
      }
    },
  onShow() {
    this.wxlogin();
  },
	methods: {
    islogout() {
      uni.setStorageSync('islogout', true)
      uni.setStorageSync('openid', '')
      this.studentList = [];
      this.name = '小博视';
      this.score = 0;
      this.count = 0;
      this.student_avatar = 'https://alicdn.joyballet.cn/eyemanager/wechat/avatar/boy_avatar.jpg';
      this.qrcodeUrl = '';
    },
		wxlogin() {
			const that = this;
      if (uni.getStorageSync('islogout')) {
        return 
      }
			// 微信自动登录
			uni.login({
				success: (res) => {
					if (res.code) {
						// 向后台请求 openid
						this.$http.GET('/admin/student/student/getOpenid', { code: res.code }, function (res) {
							console.log('请求结果:', res.data);
							const openid = res.data.openid;
							uni.setStorageSync('openid', openid);
							that.loginByOpenidGetStudentList();
						}, function (res) {})
					} else {
						console.error('获取临时登录凭证失败');
					}
				},
				fail: (err) => {
					console.error('调用 uni.login 失败:', err);
				}
			});
		},
    getPhoneNumber(e) {
      uni.setStorageSync('islogout', false)
			const that = this;
      const openid = uni.getStorageSync('openid') || '';
      this.$http.POST('/admin/student/student/getPhoneNumber', { code: e.detail.code, openid: openid }, function (res) {
        console.log('成功获取手机号信息');
        that.wxlogin();
      })
    },
    loginByOpenidGetStudentList() {
        const that = this;
        const openid = uni.getStorageSync('openid') || '';
        this.$http.POST('/admin/student/student/loginByOpenidGetStudentList', { openid: openid }, function (res) {
            that.studentList = Object.values(res.data);
            if (that.studentList.length > 0) {
                that.student_id = that.studentList[0].id;
                that.name = that.studentList[0].name;
                that.score = that.studentList[0].score || 0;
                that.count = that.studentList[0].count || 0;
                that.student_avatar = that.studentList[0].avatar || 'https://alicdn.joyballet.cn/eyemanager/wechat/avatar/boy_avatar.jpg';
                that.generateQrcode();
            }
        })
    },
    generateQrcode() {
        const that = this;
        this.$http.GET('/admin/student/student/getPersonalQrCode', { studentId: that.student_id }, function (res) {
        console.log('生成二维码成功', that.studentList, res);
          that.qrcodeUrl = res.data.qrCodeDataUrl;
          that.qrtext = res.data.text;
        })
    },
    // 添加切换学员方法
    switchStudent(id) {
        this.student_id = id;
        this.generateQrcode();
    }
  }
}
</script>
<style>
.centered-qrcode {
  width: 145px;
  height: 148px;
}


.banner_back {
  width: 100%;
  height: 291rpx;
  mix-blend-mode: normal;
  background: rgba(28, 107, 164, 1);
}

.user_info {
  position: absolute;
  z-index:4;
  left: 74rpx;
  top: 180rpx;
}

.user_info_view {
  width: 319px;
  height: 109px;
  box-shadow: 0px 2px 12px rgba(107, 134, 179, 0.25);
  border-radius: 28px;
  mix-blend-mode: normal;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  padding: 30rpx;
}

.user_avatar {
  width: 120rpx;
  margin-right: 40rpx;
  border-radius: 60rpx;
}

.user_details {
  flex: 1;
}

.user_name {
  display: block;
  font-weight: bold;
  font-size: 42rpx;
  padding: 10rpx;
}

.user_stats {
  display: flex;
  flex-wrap: wrap;
  color: #4A545E;
  padding: 5rpx;
}

.user_stats span {
  margin-right: 20rpx;
  color: #4A545E;
  padding: 5rpx;
}

.centered-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vw;
}

.centered-button {
  margin: 0 auto;
}

.with-glow {
  box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5);
  border-radius: 8px;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px 5px rgba(0, 123, 255, 0.5);
  }
  to {
    box-shadow: 0 0 30px 10px rgba(0, 123, 255, 0.7);
  }
}

.attractive-button {
  background-color: #007AFF; /* 蓝色背景，常见且醒目 */
  color: white; /* 白色文字 */
  border-radius: 25px; /* 圆角边框 */
  font-size: 18px; /* 适当增大字体 */
  padding: 12px 24px; /* 增加内边距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影，增加立体感 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.attractive-button:hover {
  background-color: #0056b3; /* 鼠标悬停时加深颜色 */
  transform: translateY(-2px); /* 鼠标悬停时向上移动 */
}
</style>